<template>
  <view class="draw_list">
    <uni-list>
      <uni-list-item >
        <!-- 自定义 header -->
        <!-- <template v-slot:header>
          <view class="slot-box " >
            <image class="slot-image left_image" :lazy-load="true"  src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3791/5035712059~300x300.image" mode="widthFix"></image>
          </view>
        </template> -->
        <!-- 自定义 body -->
        <template v-slot:body>
          <view class="content">
            <view class="view1">
              <image class="slot-image left_image" :lazy-load="true" src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3791/5035712059~300x300.image" mode="widthFix"></image>
              <view class="center">1111</view>
              <view class="df-c right" @click="to_detail">查看全部<uni-icons type="right" size="16"></uni-icons></view>
            </view>

            <view class="view2 df jc-sb">
              <image class="" style="width: 30%;height: 400rpx !important;" :lazy-load="true" src="https://i.ibb.co/PxKysqG/20230529083305.jpg"></image>
              <image class="" style="width: 30%;height: 400rpx !important;" :lazy-load="true" src="https://i.ibb.co/PxKysqG/20230529083305.jpg"></image>
              <image class="" style="width: 30%;height: 400rpx !important;" :lazy-load="true" src="https://i.ibb.co/PxKysqG/20230529083305.jpg"></image>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>

  </view>
</template>

<script setup lang="ts">
const to_detail = () => {
  uni.navigateTo({ url: "/pagesDraw/Home/Home" });
};
</script>

<style lang="scss" scoped>
.draw_list {
  // :deep(.uni-list-item) {
  //   background-color: rgb(20, 20, 20);
  // }
  // .uni-list-item {
  //   background-color: rgb(20, 20, 20);
  // }
  .left_image {
    width: 100rpx;
    border-radius: 50%;
  }

  .content {
    width: 100%;
    height: 100%;
    .view1 {
      width: 100%;
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .center {
        width: 100%;
      }
      .right {
        width: 40%;
        font-size: 28rpx;
      }
    }

    .view2 {
      margin-top: 15rpx;
    }
  }
}
</style>